<template lang="html">
  <div>
    <div class="btn">
        <el-button type="primary" @click="back">返回上一级</el-button>
        <el-button type="primary" @click="add">新增属性值</el-button>
    </div>
    <div class="add">

    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :pagination="true">
      <slot>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row,1)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                class="del"
                @click="del(scope.row,2)">删除</el-button>
            </template>
        </el-table-column>
      </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                  <el-form-item label="属性值名称" prop="attrVal">
                      <el-input v-model="pageData.attrVal" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="属性值描述">
                       <el-input v-model="pageData.attrValDesc" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item class="confirm">
                       <el-button type="primary" v-if="btnState == '1'" @click="upForm('post')">提交</el-button>
                       <el-button type="primary" v-if="btnState == '2'" @click="upForm('put')">更新</el-button>
                    </el-form-item>
              </el-form>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    attrValList,
    addattrVal,
    delAttrVal
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return {
          dialog : false,
          btnState : '',
          pageData : {
            loading : false,
            attrVal : '',
            attrValDesc : '',
            attrValId :''
          },
          list : {
            thead : [
              {label:'属性值名称',prop:"attrVal",rowspan:1},
              {label:'属性值描述',prop:"attrValDesc",rowspan:1},
              {label:'创建时间',prop:"gmtCreate",rowspan:1},
              {label:'更新时间',prop:"gmtUpdate",rowspan:1},
            ],
            tbody : []
          },
          rules : {
            attrVal: [ { required: true, message: '请输入内容', trigger: 'blur' }],
            attrValDesc: [ { required: true, message: '请输入内容', trigger: 'blur' }]
          }
      }
    },
    mounted () {
      var data = {
        attrId : JSON.parse(this.$route.query.id)
      }
      this.getAttrValList(data);
    },
    methods : {
      getAttrValList (data) {
        attrValList(data).then(res=>{
          if (res.data.code == 'OK') {
            this.pageData.loading = false;
            this.list.tbody = res.data.data.valList.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               return item;
            });
          } else {
             setTimeout(()=>{
               this.pageData.loading = false;
             },2000)
          }
        })
      },
      back () {
        this.$router.push({
          name : 'qualityOption'
        })
      },
      changeData (data) {
          this.dialog = data;
      },
      add () {
        this.pageData = {};
        this.dialog = true;
        this.btnState = '1';
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      },
      search () {
        // let data = {
        //   name
        // }
      },
      handSize (val) {

      },
      handleEdit (item) {
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields();
        this.btnState = '2';
        this.dialog = true;
        this.pageData.attrVal = item.attrVal;
        this.pageData.attrValDesc = item.attrValDesc;
        this.pageData.attrValId = item.attrValId;
      },
      upForm (method) {
        var data = {
          attrId : JSON.parse(this.$route.query.id),
          attrVal : this.pageData.attrVal,
          attrValDesc : this.pageData.attrValDesc,
          attrValId : this.pageData.attrValId
        }
        addattrVal(data,method).then(res=>{
          if (res.data.code == 'OK') {
              this.dialog = false;
              var data = {
                attrId : JSON.parse(this.$route.query.id)
              }
              this.getAttrValList(data);
              if (method == 'post') {
                  this.$message.success('新增成功');
              } else {
                 this.$message.success('编辑成功');
              }
           }
        })
      },
      del (item) {
        this.delMessage(()=>{
          var id = [];
          id.push(item.attrValId)
          delAttrVal(id).then(res=>{
            if (res.data.code == 'OK') {
              var data = {
                attrId : JSON.parse(this.$route.query.id)
              }
              this.$message.success('删除成功');
                this.getAttrValList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
    }
  }
</script>

<style scoped>
  @import "../../../../../styles/common.css";
  .btn {
    margin-top: 10px;
  }
</style>
